<template>
  <div style="height: 700px;width: 100%">
    <e-charts auto-resize :options="option" @click='onClick'
              style="height: 700px;width: 100%"></e-charts>
  </div>
</template>

<script>
import {
  usdtCurrent
} from "@/api/platform/running";

import ECharts from 'vue-echarts';

require('echarts/lib/chart/gauge');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/legendScroll');
export default {
  components: {ECharts},
  props: {
    platform: null,
    runningId: null,
  },
  filters: {
    rounding(value) {
      return parseFloat(value).toFixed(2)
    }
  },
  data() {
    return {
      startTs: '',
      endTs: '',
      tableData: [],
      pickerOptions1: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      option: {
        title: {
          text: '折线图堆叠'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (value) {
            var date = new Date(parseInt(value[0].axisValue));//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var sdate = ("0" + date.getDate()).slice(-2),
              hour = ("0" + date.getHours()).slice(-2),
              minute = ("0" + date.getMinutes()).slice(-2),
              second = ("0" + date.getSeconds()).slice(-2);

            var time = sdate + " " + hour + ":" + minute + ":" + second;
            let result = time + '</br>';
            value.map(item => {
              if (item.value !== '') {
                result += item.seriesName + ':' + item.value + '</br>';
              }
            });
            return result;
          }
        },
        legend: {
          data: ['帐户合计', 'K线帐户', '深度帐户']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLabel: {
            formatter: function (value) {
              var date = new Date(parseInt(value));//时间戳为10位需*1000，时间戳为13位的话不需乘1000
              var sdate = ("0" + date.getDate()).slice(-2),
                hour = ("0" + date.getHours()).slice(-2),
                minute = ("0" + date.getMinutes()).slice(-2),
                second = ("0" + date.getSeconds()).slice(-2);

              var result = sdate + " " + hour + ":" + minute + ":" + second;
              // 返回
              return result;
            }
          }
        },
        yAxis: {
          type: 'value',
          min: function (value) {
            return value.min - 1000;
          }
        },
        series: [
          {
            name: '帐户合计',
            type: 'line',
            stack: '总量',
            data: []
          },
          {
            name: 'K线帐户',
            type: 'line',
            stack: '总量',
            data: []
          },
          {
            name: '深度帐户',
            type: 'line',
            stack: '总量',
            data: []
          }

        ]
      }
    }
  },
  mounted() {
    this.loadRate();
  },
  methods: {
    loadRate() {
      var oneDayBefore = new Date().getTime() - 24 * 3600000
      usdtCurrent(this.runningId, {platform: this.platform, start: oneDayBefore}).then(res => {
        this.option.series[0].data = res.data.totalInfo
        this.option.series[1].data = res.data.klineInfo
        this.option.series[2].data = res.data.depthInfo
        this.option.xAxis.data = res.data.timeStr

      })

    },
    dateFormat(row) {
      var time = row.createTime;
      if (time === undefined) {
        return ''
      }

      var date = new Date(parseInt(time))
      var hour = ("0" + date.getHours()).slice(-2),
        minute = ("0" + date.getMinutes()).slice(-2),
        second = ("0" + date.getSeconds()).slice(-2);
      var result = hour + ":" + minute + ":" + second;
      return result
    },
    onClick(params) {
      if (this.isNull(this.startTs)) {
        this.startTs = params.name
      } else {
        if (parseInt(params.name) > parseInt(this.startTs))
          this.endTs = params.name
      }
    },
    isNull(ele) {
      if (typeof ele === 'undefined') {//先判断类型
        return true;
      } else if (ele == null) {
        return true;
      } else if (ele == '') {
        return true;
      }
      return false;
    },
    clean() {
      this.startTs = ''
      this.endTs = ''
    },
    queryDeal() {
      http.get("/accounts/orders/dealed", {
        'platform': this.platform,
        'start': this.startTs,
        'end': this.endTs
      }).then(res => {
        this.tableData = res.data.data
      })
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
